<template>
	<view>
		<view class="page__content">
			<z-paging ref="paging" v-model="workOrderList" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>
					<up-navbar :fixed="false" title="工单" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true">
					</up-navbar>

					<view class="page__content__search">
						<up-search :showAction="true" v-model="searchValue" :placeholder="CheckedSearchData.placeholder"
							searchIcon=" " shape="square" actionText="搜索" @search="onSearch" @custom="onSearch"
							:actionStyle="{color:'#fff',width:'80rpx',fontSize:'24rpx'}" :animation="false"
							:inputStyle="{fontSize: '24rpx'}">
							<template v-slot:label>
								<m-dropdown-menu :options="SearchCheckList" v-model="CheckedSearchData" KeyID="value"
									marginTop="10" zIndex="999999" @selectItem="ChoiceCell">
									<template #default="{element}">
										<view class="x-f MenuText" :style="{color: element ? '#3d9edf' : '#333'}">
											<text>{{CheckedSearchData['text']}}</text>
											<up-icon :name="element ? 'arrow-up-fill':'arrow-down-fill'"
												:color="element ? '#3d9edf' : '#333'" size="10"
												style="margin-left: 4px;"></up-icon>
										</view>
									</template>
								</m-dropdown-menu>
							</template>
						</up-search>
					</view>

					<view class="TabsBox">
						<m-scroll-tag @tabChange="changeTab" :tagsList="workOrderStatus" bgColor="#52b583">
							<template #right>
								<view class="IconBoxs x-f">
									<uni-icons fontFamily="CustomFontPlatform"
										style="margin-left: 14px;font-weight: 600;" color="#999" @click="OpenSortPopup"
										:class="sortData.Sort.value.toLowerCase() == 'desc' ? '' : 'icon-flip-vertical'"
										size="40rpx">{{ uni.$utils.toUniCode('&#xe7e9;')}}</uni-icons>

									<!-- <view class="x-end">
										<uni-icons fontFamily="CustomFontPlatform"
											style="margin-left: 14px;font-weight: 600;" color="#999"
											@click="OpenFilterPopup"
											:size="20">{{uni.$utils.toUniCode('&#xe628;')}}</uni-icons>

										<text style="zoom: .7;color: #999;font-weight: 600;">{{FilterNums}}</text>
									</view> -->
								</view>

							</template>
						</m-scroll-tag>
					</view>

					<!-- 悬浮按钮_扫码 -->
					<m-drag-button v-if="ApproveBack('扫码') && !uni.$utils.isPda()" :isDock="true" :existTabBar="true"
						:initialBottom="160" @btnClick="ToScanBtn">
						<template #BtnContent>
							<u-icon name="scan" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
					<!-- 悬浮按钮_新增 -->
					<m-drag-button :isDock="true" :existTabBar="true" :initialBottom="80" @btnClick="ToAddTicketBtn">
						<template #BtnContent>
							<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
				</template>

				<view style="padding: 10px;">
					<template v-for="(row, index) in workOrderList" :key="index">
						<view class="common__box__list-card" @click="handleItemToDetail(row)">
							<view class="common__box__list-card__top">
								<view class="common__box__list-card__top__left">
									<text class="common__box__list-card__top__left__title">{{row.BillNO}}</text>

								</view>

								<view class="common__box__list-card__top__right">
									<view v-if="row.FStateName" class="OrderStatus"
										:class="GetStatusBackClass(row.FState)">
										<text>{{row.FStateName}}</text>
									</view>
								</view>
							</view>


							<view class="common__box__list-card__content">
								<!-- <view class="common__box__list-card__content__field">
									<view class="common__box__list-card__content__field__label">
										<text>销售单号：</text>
									</view>

									<view class="common__box__list-card__content__field__value">
										<text>{{row.SoBillNO}}</text>
									</view>
								</view> -->

								<view class="common__box__list-card__content__field">
									<view class="common__box__list-card__content__field__label">
										<text>产品名称：</text>
									</view>

									<view class="common__box__list-card__content__field__value x-f">
										<text>{{row.ProductName}}</text>
										<text style="margin: 0 4px;">/</text>
										<text>{{row.ProductCode}}</text>
										<text style="margin: 0 4px;">/</text>
										<text>{{row.ProductSpec}}</text>
									</view>
								</view>

								<view class="common__box__list-card__content__field">
									<view class="common__box__list-card__content__field__label">
										<text>生产车间：</text>
									</view>

									<view class="common__box__list-card__content__field__value">
										<text>{{row.FWorkshopName}}</text>
									</view>
								</view>

								<view class="common__box__list-card__content__field">
									<view class="common__box__list-card__content__field__label">
										<text>计划时间：</text>
									</view>

									<view class="common__box__list-card__content__field__value">
										<text>{{BackDate(row.DueStartDate)}}</text>
										<text style="margin: 0 4px;">—</text>
										<text>{{BackDate(row.DueEndDate)}}</text>
									</view>
								</view>

								<view class="common__box__list-card__content__field">
									<view class="common__box__list-card__content__field__label">
										<text>工单进度：</text>
									</view>

									<view class="common__box__list-card__content__field__value">
										<text>{{row.WCQty || 0}}</text>
										<text style="margin: 0 1px;">/</text>
										<text>{{row.FPlanQty}}</text>
										<text style="margin-left: 2px;">{{row.UnitName}}</text>
									</view>
								</view>

								<view v-show="row.Children.length">
									<procedure-step :procedures="row.Children" :TheIndex="(index + 1)"
										:BText="{text:'外协',id:'Outsource'}"
										@circle-clicked="CircleClicked"></procedure-step>

								</view>
							</view>


						</view>
					</template>
				</view>



				<template #bottom>
					<mc-tabbar style="width: 100%;" :current-page="currentID"></mc-tabbar>
				</template>

			</z-paging>
		</view>

		<!-- 进度列表弹层 -->
		<up-popup class="MainPopup" :show="showProcedure" mode="center" :round="12" zIndex="999999"
			@close="closeProcedure">
			<view class="progressBox">

				<view class="Type" :class="['Type_'+ProgressInfo.FState]">
					<text>{{ProgressInfo.FStateName}}</text>
				</view>

				<view class="x-bc">
					<text class="TitleName">{{ProgressInfo.ProcedureName}}</text>

					<up-tag v-if="ProgressInfo.Outsource" text="外协" style="margin-left: 10rpx;" size="mini"
						type="warning"></up-tag>
				</view>

				<view style="margin-top: 4px;">
					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="任务进度:">
						<template v-slot:custom-value>
							<view class="x-f">
								<text>{{ProgressInfo.WCQty}}</text>
								<text>/</text>
								<text>{{ProgressInfo.FPlanQty}}</text>
							</view>
						</template>
					</m-field>
					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="良品数:" :value="ProgressInfo.FDailyQtt" valueColor="#1acf4e">
					</m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="不良数:" :value="ProgressInfo.FNgQty" valueColor="#f04c3c"></m-field>

					<!-- <m-field  valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="优先级:" value=" "></m-field> -->

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="完成数量:" :value="ProgressInfo.WCQty"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="计划数量:" :value="ProgressInfo.FPlanQty"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="可报数量:" :value="ProgressInfo.ReportQty"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="是否外协:" :value="ProgressInfo.OutsourceName"></m-field>

					<m-field valueFontSize="28rpx" labelFontSize="28rpx" paddings="8rpx 0" valueWeight="600"
						:borderBottom="false" label="生产车间:" :value="ProgressInfo.FWorkshopName"></m-field>
				</view>

			</view>
		</up-popup>

		<!-- 排序弹层 -->
		<uni-popup ref="popup_sort" type="bottom" background-color="#ffffff" @close="closeSortPopup">
			<view class="f-dc" style="max-height: 80vh;" :style="uni.$utils.disposeSafeBottomFun()">
				<up-navbar :fixed="false" title="排序" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeSortPopup"></uni-icons>
					</view>
				</up-navbar>

				<view class="MainBox" style="padding: 15px;flex: 1;overflow: auto;padding-bottom: 20px;">
					<m-sort :sortOptions="sortOptions" :defaultSort="defaultSort" :selectSort="sortData.Sort"
						@change="handleSortChange"></m-sort>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useUserStore, usePermissionStore, useTicketStore } from '@/store';
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();
	const ticketStore = useTicketStore();
	import procedureStep from '../components/procedure-step/procedure-step';
	// import mDropdownMenu from '../components/m-dropdown-menu/m-dropdown-menu';
	import mcTabbar from '../components/mc-tabbar/mc-tabbar';
	import mScrollTag from '../components/m-scroll-tag/m-scroll-tag';

	defineOptions({
		options: {
			styleIsolation: 'shared'
		}
	})
	// 搜索
	let searchValue = ref("");
	let SearchCheckList = ref<any>([
		{
			text: '默认',
			title: '工单编号、产品编号、产品名称、产品规格',
			placeholder: '搜工单、查产品',
			value: 0,
			Checked: true,
		},
		{
			text: '工单编号',
			title: '工单编号',
			placeholder: '输入工单编号搜索',
			value: 1,
			Checked: false,
		},
		{
			text: '产品编号',
			title: '产品编号',
			placeholder: '输入产品编号搜索',
			value: 2,
			Checked: false,
		},
		{
			text: '产品名称',
			title: '产品名称',
			placeholder: '输入产品名称搜索',
			value: 3,
			Checked: false,
		},
		{
			text: '产品规格',
			title: '产品规格',
			placeholder: '输入产品规格搜索',
			value: 4,
			Checked: false,
		}, {
			text: '生产车间',
			title: '生产车间',
			placeholder: '输入生产车间搜索',
			value: 5,
			Checked: false,
		}, {
			text: '销售单号',
			title: '销售单号',
			placeholder: '输入销售单号搜索',
			value: 6,
			Checked: false,
		},
	]);
	let CheckedSearchData = ref<any>({});
	CheckedSearchData.value = SearchCheckList.value[0];
	// 选中搜素字段
	function ChoiceCell(data : any) {
		SearchCheckList.value = SearchCheckList.value.map((item : any) => {
			return {
				...item,
				Checked: item.value == data.value
			};
		});
		CheckedSearchData.value = data;
	};

	function onSearch() {
		paging.value.reload();
	}
	// 扫码
	function ToScanBtn() {
		uni.$utils.$scanPopup.openScan({
			success(res) {
				searchValue.value = res.result;
				onSearch();
			}
		})
	};
	// 新增
	function ToAddTicketBtn() {
		uni.navigateTo({
			url: '/st_ticket/page_ticket/ticket-creat'
		})
	}
	let BtnApprove = ref<any>([]);
	let foundNode = ref<any>(null);
	// 获取页面按钮权限
	const moduleInfoAll = permissionStore.moduleInfoAll;

	for (let i = 0; i < moduleInfoAll.length; i++) {
		if (moduleInfoAll[i]['TreeTypeName'] == '生产管理') {
			for (let j = 0; j < moduleInfoAll[i]['Node'].length; j++) {
				if (moduleInfoAll[i]['Node'][j]['APFunName'] == '工单') {
					foundNode.value = moduleInfoAll[i]['Node'][j];
					break;
				}
			}
			if (foundNode.value) {
				break;
			}


		}
	};
	if (foundNode.value.hasOwnProperty("IconApprove")) {
		BtnApprove.value = foundNode.value['IconApprove'];
	};

	function ApproveBack(str : string) {

		if (!BtnApprove.value.length) {
			return false;
		}

		let Type = BtnApprove.value.some((item : any) => {
			return item.MenuName == str
		})
		return Type;
	};

	interface pagingInstance {
		reload : () => void;
		refresh : () => void;
		complete : () => void;
		setLocalPaging : () => void;
	}
	let paging = ref<pagingInstance | any>(null);

	// 定时器
	let timeRoot = ref<any>({
		tabTimer: null
	})

	// Tab数据
	let workOrderStatus = ref<any>([
		{
			name: '全部',
			value: ''
		},
		{
			name: '未生产',
			value: 0
		},
		{
			name: '生产中',
			value: 3
		},
		{
			name: '已领料',
			value: 2
		},
		{
			name: '指定结束',
			value: -1
		},
		{
			name: '结束',
			value: 1
		}
	]);
	let searchData = reactive({
		value: '',
		name: '全部'
	})
	// tab栏切换
	function changeTab(item : any) {
		console.log(item);
		Object.assign(searchData, item.data)

		clearTimeout(timeRoot.value.tabTimer);
		timeRoot.value.tabTimer = setTimeout(() => {
			onSearch();
		}, 300);
	};
	// 选中的排序数据 
	let sortData = ref<any>({
		OrderBy: '',
		Sort: {},
	});
	let defaultSort = ref<any>({});
	// 排序数据
	let sortOptions = [
		{
			id: "1",
			name: "单据日期",
			param: 'BillDate',
		},
		{
			id: "2",
			name: "工单编号",
			param: 'BillNO',
		},
		{
			id: "3",
			name: "产品编号",
			param: 'ProductCode',
		},
		{
			id: "4",
			name: "产品名称",
			param: 'ProductName',
		},
		{
			id: "5",
			name: "产品规格",
			param: 'ProductSpec',
		},
		{
			id: "6",
			name: "计划开始时间",
			param: 'DueStartDate',
		},
		{
			id: "7",
			name: "计划完成时间",
			param: 'DueEndDate',
		},
		{
			id: "8",
			name: "实际开始时间",
			param: 'SoothStartDate',
		},
		{
			id: "9",
			name: "实际结束时间",
			param: 'SoothEndDate',
		},
	];
	// 升降序数据
	let sortFields = [
		{
			text: '升序',
			value: 'ASC'
		},
		{
			text: '降序',
			value: 'DESC'
		}
	];
	interface sortInterface {
		open : () => void;
		close : () => void;
	};
	let popup_sort = ref<sortInterface | any>(null)
	// 关闭排序弹层 
	function closeSortPopup() {
		popup_sort.value.close();
	};
	function OpenSortPopup() { // 点击打开排序 
		popup_sort.value.open();
	};
	function handleSortChange(sortDataInfo : any) { // 选中排序
		const {
			sort: {
				param,
				id
			},
			item
		} = sortDataInfo;
		closeSortPopup();
		// 在这里处理排序改变的逻辑
		setTimeout(() => {
			sortData.value.OrderBy = param;
			defaultSort.value = id;
			sortData.value.Sort = item;
			paging.value.reload();
			let SetInfo = {
				defaultSort: defaultSort.value,
				sortData: sortData.value,
			};
			ticketStore.ticket_sort = SetInfo;
		}, 50);

	};


	if (!uni.$utils.isEmpty(ticketStore.ticket_sort)) {
		sortData.value = ticketStore.ticket_sort.sortData;
		defaultSort.value = ticketStore.defaultSort;
	} else {
		sortData.value.OrderBy = sortOptions[0]['param'];
		sortData.value.Sort = sortFields[1];
		defaultSort.value = sortOptions[0]['id'];
	};
	// 选中的筛选条件数量
	let FilterNums = ref(0);
	// 筛选弹层
	function OpenFilterPopup() {

	};

	// 数据源获取
	let workOrderList = ref<any>([]);
	let choiceCardInfo = reactive<any>({});
	// 点击列表项，跳转到详情
	function handleItemToDetail(data : any) {
		Object.assign(choiceCardInfo, data);
		uni.navigateTo({
			url: '/st_ticket/page_ticket/ticket-infoPage' + '?WoOrderID=' + data.WoOrderID,
		})
	};
	// 根据传入的单据状态值，返回对应的class
	function GetStatusBackClass(data : any) {
		return 'OrderStatus_' + data
	};
	function BackDate(str : any) {
		return str.split("T")[0];
	};
	// 任务进度数据
	let ProgressInfo = reactive<any>({});
	// 环形选项弹层
	let showProcedure = ref(false);
	// 点击环形图选项
	function CircleClicked(data : any, index : number) {
		ProgressInfo = data;
		showProcedure.value = true;
	};
	// 关闭环形弹层 
	function closeProcedure() {
		showProcedure.value = false;
	}

	let page = reactive({
		page: 1,
		pageSize: 20
	})

	let CheckedTimes = reactive({
		Plan: ["", ""], // 计划时间日期选择数据
		Actual: ["", ""], // 实际时间日期选择数据
		BillDate: ["", ""], // 单据日期选择数据
	});

	function dateFormat(data : any) {
		if (uni.$utils.isEmpty(data)) {
			return ''
		}
		return uni.$utils.dateFormat(new Date(data), 'Y-MM-dd');
	};

	function handleData(AData : any, BData : any, Total : number) {
		for (let i = 0; i < AData.length; i++) {
			let matchedItems = BData.filter((bItem : any) => bItem.WoOrderID === AData[i].WoOrderID);
			for (let j = 0; j < matchedItems.length; j++) {
				if (typeof matchedItems[j].WCQty === 'number' && typeof matchedItems[j].FPlanQty === 'number') {
					matchedItems[j].value = ((matchedItems[j].WCQty / matchedItems[j].FPlanQty) * 100).toFixed(
						2); // 使用toFixed来确保得到的是字符串形式的百分比  
				} else {
					matchedItems[j].value = '0.00'; // 确保value是一个字符串形式的百分比  
				}
				matchedItems[j].text = matchedItems[j].ProcedureName || "";
			};

			AData[i].Children = matchedItems.sort((a : any, b : any) => a.FlowOrder - b.FlowOrder);
			if (matchedItems.length === 0) {
				AData[i].Children = [];
			}
		}
		paging.value.complete(AData);

		uni.$utils.hideLoading(500);
	};

	async function queryList(pageNo : number) {
		uni.$utils.showLoading();
		try {
			let firstRet = await request({
				config: {
				},
				url: 'XGD_WorkOrder',
				method: 'POST',
				data: {
					SearchKey: searchValue.value,
					PageIndex: pageNo,
					PageSize: page.pageSize,
					OrderBy: sortData.value.OrderBy,
					Sort: sortData.value.Sort['value'],
					FState: searchData.value,
					FEDate1: dateFormat(CheckedTimes.Plan[0]) || '',
					FBDate2: dateFormat(CheckedTimes.Plan[1]) || '',
					FBDate1: dateFormat(CheckedTimes.Actual[0]) || '',
					FEDate2: dateFormat(CheckedTimes.Actual[1]) || '',
					SearchItem: CheckedSearchData.value.value, // 根据什么搜索
				}
			});

			let IDs = '';
			let request1Data = [];
			let Total = 0;

			if (firstRet.status != 200) {
				paging.value.complete(false);
				uni.$utils.hideLoading();
				return;
			};
			if (firstRet.data.ds1 && firstRet.data.ds1.length && firstRet.data.ds1[0]['Total'] === 0) {
				paging.value.complete([]);
				uni.$utils.hideLoading();
				return;
			};
			Total = firstRet.data.ds1[0]['Total'];
			IDs = firstRet.data.ds.map((item : any) => item.WoOrderID).join(',');

			let secondRet = await request({
				config: {
				},
				url: 'XGD_WorkOrder_PROC',
				method: 'POST',
				data: {
					WoOrderID: IDs
				}
			});

			if (secondRet.status !== 200) {
				paging.value.complete([]);
				uni.$utils.hideLoading();
				return;
			};
			handleData(firstRet.data.ds, secondRet.data.ds, Total);


		} catch (error) {
			paging.value.complete(false);
			uni.$utils.hideLoading();
		}
	};

	// 刷新
	function refreshPage() {
		// 重置搜索条件
		Object.assign(searchData, {
			value: '',
			name: '全部'
		});
		onSearch();
	}

	let currentID = ref(0);
	onLoad((option : any) => {
		if (!uni.$utils.isEmpty(option)) {
			currentID.value = +option.TabbarID;
		} else {
			currentID.value = 0;
		};
	});

	onMounted(() => {
		uni.$on("refreshPage_ticket", (ret : any) => {
			refreshPage();
		})
	});

	onUnload(() => {
		uni.$off("refreshPage_ticket");
	})
</script>

<style lang="scss" scoped>
	:root {
		styleIsolation: 'shared';
	}

	.page__content {
		background-color: #eeeeee;
		height: 100vh;

		.icon-flip-vertical {
			display: inline-block;
			/* 或者其他适合你的布局的display值 */
			transform: scaleY(-1);
			/* 垂直翻转 */
		}


		// 顶部tab栏
		.TabsBox {
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-bottom: 2px solid #eee;

			:deep(.u-tabs__wrapper__nav__item__text) {
				padding: 8rpx 20rpx !important;
			}
		}


		.OrderStatus {
			font-size: 24rpx;
			font-weight: 600;
			padding: 6rpx 12rpx;
			border-radius: 99999px;
			width: fit-content;
			min-width: 100rpx;
			text-align: center;
			letter-spacing: 2rpx;

			background-color: #e8e8e8;
			color: #3c3c3c;

			/* 未生产 */
			&_0 {
				background-color: #e8e8e8;
				color: #3c3c3c;
			}

			/* 结束 */
			&_1 {
				background-color: #d9f5ec;
				color: #269b74;
			}

			/* 已领料 */
			&_2 {
				background-color: #adf0eb;
				color: #1696eb;
			}

			/* 生产中 */
			&_3 {
				background-color: #d7eefc;
				color: #1d87cf;
			}

			/* 指定结束 */
			&_-1 {
				background-color: #f5fccd;
				color: #d0d30b;
			}
		}

		&__search {

			.scanQrCode {
				width: 20rpx;
				padding: 5rpx;
			}

			.MenuText {
				font-size: 24rpx;
				border-right: 1px solid #999;
				padding-right: 20rpx;
				margin-right: 8rpx;
			}
		}
	}



	.MainBox {
		flex: 1;
		overflow: auto;
	}



	.MainPopup {
		flex: initial !important;

		.u-transition {
			z-index: 99999 !important;
		}





		.MainBox {
			padding: 0px 2px;
			flex: 1;
			overflow: auto;
		}

	}

	// 进度弹层 -- start --
	.progressBox {
		display: flex;
		flex-direction: column;
		padding: 20px;
		min-width: 70vw !important;
		max-width: 600rpx;
		position: relative;

		.Type {
			border-radius: 14px;
			font-weight: 600;
			padding: 4px 8px;
			font-size: 14px;
			position: absolute;
			top: 16px;
			right: 20px;
		}

		// 未报工
		.Type_0 {
			background-color: #e8e8e8;
			color: #3c3c3c;
		}

		// 已完成
		.Type_1 {
			background-color: #d9f5ec;
			color: #269b74;
		}

		// 指定完成
		.Type_-1 {
			background-color: #f5fccd;
			color: #d0d30b;
		}

		// 部分报工
		.Type_2 {
			background-color: #d7eefc;
			color: #1d87cf;
		}

		.TitleName {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	// 进度弹层 -- end --
</style>